<template>
  <div>
    <h1>axios的封装和使用</h1>
    <div>
      <label for="account">用户名：<input type="text" v-model="userInfo.account" /></label>
    </div>
    <div>
      <label for="password">密码：<input type="text" v-model="userInfo.password" /></label>
    </div>
    <button @click="handleLogin">登录</button>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
// import axios from 'axios'
// import qs from 'qs'
import request from '../utils/request'
import { fetchLogin } from '../api/users/index'

interface IUserInfo {
  account: string
  password: string
}
const userInfo = ref<IUserInfo>({
  account: 'admin',
  password: 'cd3f0c85b158c08a2b113464991810cf2cdfc387',
})
// 不封装直接使用
// const handleLogin = async () => {
//   const res = await axios.post(
//     'http://172.18.208.1:5000/users/checkLogin',
//     qs.stringify(userInfo.value),
//   )
//   const res1 = await axios({
//     url: 'http://172.18.208.1:5000/users/list',
//     headers: {
//       Authorization: res.data.token,
//     },
//     method: 'get',
//     params: {
//       currentPage: 1,
//       pageSize: 10,
//     },
//   })
//   console.log(res1)
// }

// http://192.168.121.41:5000/goods/goods_list
// 第一次封装的背景：不封装直接使用是没有功能问题的，但直接使用会造成项目中充斥着大量的重复代码，违背了dry原则，非常不利于维护，给项目带来了巨大的风险所以此时需要把请求中重复的代码进行第一次封装
// 第一次封装：把请求中重复的代码全部抽离出来放到request文件中，比如请求基路径、超时时间、请求拦截器、响应拦截器、请求头、异常处理、restful请求方法的公共代码
// const handleLogin = async () => {
//   const res = await request.post('/users/checkLogin', userInfo.value)
//   console.log(res.data)
//   const res1 = await request.get('/goods/goods_list', { currentPage: 1, pageSize: 10 })
//   console.log(res1)
// }

// 第二次封装的背景：在项目中一般会有大量的异步请求代码，这些异步请求代码，可可能会在多个地方使用到，比较分散，同时，这些异步请求的代码，一般都是以模块来划分的，这样便于统一维护和管理
const handleLogin = async () => {
  const res = await fetchLogin(userInfo.value)
  const res1 = await request.get('/goods/goods_list', { params: { currentPage: 1, pageSize: 10 } })
  const res2 = await request.put('/goods/goods_list', { data: { currentPage: 1, pageSize: 20 } })
  const res3 = await request.del('/goods/goods_list')
  console.log(res)
  console.log(res1)
  console.log(res2)
  console.log(res3)
}

// axios的三层封装
// 1.第一层：把请求中的基路径、超时时间、拦截器等重复抽离到request中，遵循restful规范声明四个请求方法，暴露请求地址和请求参数
// 2.第二层：把所有的请求按照模块进行划分，把请求地址封装起来，把请求参数暴露出去
// 3.第三层：在vue组件中引入第二层封装，利用async/await对异步代码同步化
</script>

<style lang="scss" scoped></style>
